<template>
  <!-- 管理员菜单 -->
  <el-menu
    :default-active="route.path"
    class="el-menu-vertical-demo"
    :collapse="userStore.showMenu"
    :close-on-click-outside="false"
    :router="true"
    background-color="rgb(52,64,78)"
    text-color="#fff"
    active-text-color="#ffd04b"
    :unique-opened="true"
  >
    <el-menu-item>
      <el-icon :size="30">
        <Operation />
      </el-icon>
      <template #title>
        <h1 class="title2">宿管端</h1>
      </template>
    </el-menu-item>
    <el-divider border-style="solid" />

    <!--宿舍管理  -->
    <el-sub-menu index="1">
      <template #title>
        <el-icon><Histogram /></el-icon>
        <span> 宿舍管理</span>
      </template>
      <el-menu-item index="/home/domitory"> 宿舍信息</el-menu-item>
      <el-menu-item index="/home/domi_change"> 换房申请处理</el-menu-item>
      <el-menu-item index="/home/subscribe"> 公共设施管理</el-menu-item>
    </el-sub-menu>

    <!-- 假期管理 -->
    <el-sub-menu index="2">
      <template #title>
        <el-icon><Guide /></el-icon>
        <span>学生管理</span>
      </template>
      <el-menu-item index="/home/back_dom">学生假期去向管理</el-menu-item>
      <el-menu-item index="/home/leave_dom">学生信息管理</el-menu-item>
      <el-menu-item index="/home/stay_dom">留校管理</el-menu-item>
    </el-sub-menu>

    <!-- 学生事务管理 -->
    <el-sub-menu index="3">
      <template #title>
        <el-icon><Menu/></el-icon>
        <span>学生事务管理</span>
      </template>
      <el-menu-item index="/home/repair_dom">
        <el-icon><Connection /></el-icon>
        <template #title>报修管理</template>
      </el-menu-item>
      <el-menu-item index="/home/message">
        <el-icon><Connection /></el-icon>
        <template #title>留言管理</template>
      </el-menu-item>
      <el-menu-item index="/home/sani_dom">
        <el-icon><Connection /></el-icon>
        <template #title>卫生检查管理</template>
      </el-menu-item>
    </el-sub-menu>
    <!-- 宿管个人中心 -->
    <el-menu-item index="/home/dom_center">
      <el-icon><Avatar /></el-icon>
      <template #title>个人中心</template>
    </el-menu-item>

    <!--  公告栏管理 -->
    <el-menu-item index="/home/notice_dom">
      <el-icon><List /></el-icon>
      <template #title>公告栏管理</template>
    </el-menu-item>

   
  </el-menu>
</template>

<script setup>
import { useRoute } from "vue-router";
import { useUserStore } from "@/stores/userStore";

const userStore=useUserStore()
const route = useRoute();

</script>



<style scoped lang="scss">
.title2 {
	font-size: 25px;
}
.el-menu{
	height: calc(100vh - 71px)
}


.el-menu-vertical-demo:not(.el-menu--collapse) {
	height: calc(100vh - 71px);
	.nav-switch {
		position: absolute;
		right: 0;
		bottom: 10px;
	}
}

.el-menu {
	--el-menu-bg-color: rgb(0, 0, 0);
}

.el-sub-menu {
	&:deep(.el-menu) {
		background-color: #00000042;
	}
}
</style>
